<template lang="">
  <div class="box">
    <div class="top_box">
      <t-form>
        <t-form-item label="员工姓名" name="name" initialData="TDesign">
          <t-input placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="员工编号" name="name" initialData="TDesign">
          <t-input placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="手机号码" name="name" initialData="TDesign">
          <t-input placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="员工工号" name="name" initialData="TDesign">
          <t-input placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="组织架构" name="name" initialData="TDesign">
          <t-input placeholder="请输入内容">
            <t-input
              type="password"
              v-model="formData.password"
              placeholder="请输入密码"
            ></t-input>
          </t-input>
          <icon name="search" />
        </t-form-item>
        <t-form-item label="激活状态" name="name" initialData="TDesign">
          <t-select
            v-model="college"
            class="demo-select-base"
            clearable
            filterable
            placeholder="请选择所在学院"
          >
            <t-option
              v-for="(item, index) in options"
              :value="item.value"
              :label="item.label"
              :key="index"
            >
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="角色" name="name" initialData="TDesign">
          <t-input placeholder="请输入内容" />
        </t-form-item>
        <t-button
          theme="primary"
          class="btn"
          type="submit"
          style="background-color: rgb(59, 182, 254); border: 0"
          >查询</t-button
        >
        <t-button
          theme="default"
          class="btn"
          variant="base"
          type="reset"
          style="
            color: rgb(59, 182, 254);
            border: 1px solid rgb(59, 182, 254);
            background-color: #fff;
          "
          >重置</t-button
        >
        <div>
          <!-- <t-dropdown
            :options="[
              { content: '操作一', value: 1 },
              { content: '操作二', value: 2 },
            ]"
          >
            <t-button
              class="btn"
              style="background-color: rgb(59, 182, 254); border: 0"
              >批量操作</t-button
            >
          </t-dropdown> -->
          <t-button
            class="btn"
            style="background-color: rgb(59, 182, 254); border: 0"
            @click="adduser()"
            >添加人员</t-button
          >
        </div>
      </t-form>
    </div>
    <div class="tab_box">
      <div class="btn"><icon name="refresh" />同步数据</div>
      <t-table
        row-key="index"
        :data="data"
        :columns="columns"
        :stripe="stripe"
        :bordered="bordered"
        :hover="hover"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :size="size"
        :pagination="pagination"
        :show-header="showHeader"
        cell-empty-content="-"
        resizable
        @row-click="handleRowClick"
        :onPageChange="pagechange"
        stripe
      >
        <template #operation="{ row }">
          <t-link theme="primary" hover="color" @click="rehandleClickOp(row)">
            编辑
          </t-link>
          <t-link theme="primary" hover="color" @click="rehandleClickdl(row)">
            删除
          </t-link>
        </template>
      </t-table>
    </div>
    <!-- 添加对话框 -->
    <t-dialog
      v-model:visible="visible"
      :footer="false"
      header="同级添加"
      width="800px"
    >
      <t-form
        ref="form"
        :rules="rules"
        :data="formData1"
        :colon="true"
        layout="inline"
        @reset="onReset"
        @submit="onSubmit"
      >
        <t-form-item label="员工姓名" name="name">
          <t-input
            v-model="formData1.name"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="手机号码" name="mobile">
          <t-input
            v-model="formData1.mobile"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="员工角色" name="role">
          <t-input
            v-model="formData1.role"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="组织架构" name="department">
          <t-cascader
            v-model="formData1.department"
            :options="zjlist"
            clearable
            @change="onChange1"
          />
        </t-form-item>
        <t-form-item label="员工工号" name="memberno">
          <t-input
            v-model="formData1.memberno"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="账号" name="userName">
          <t-input
            v-model="formData1.userName"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="密码" name="password">
          <t-input
            v-model="formData1.password"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="员工状态" name="status">
          <t-select v-model="formData1.status">
            <t-option label="在职员工" value="Y" />
            <t-option label="离职员工" value="N"></t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="邮箱" name="email">
          <t-input
            v-model="formData1.email"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="岗位" name="prop1">
          <t-input
            v-model="formData1.prop1"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="职位" name="prop2">
          <t-input
            v-model="formData1.prop2"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="性别" name="gender">
          <t-input
            v-model="formData1.gender"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="出生日期" name="birthday">
          <t-input
            v-model="formData1.birthday"
            placeholder="请输入内容"
            style="width: 200px"
          ></t-input>
        </t-form-item>
        <t-form-item label="学历" name="education">
          <t-select v-model="formData1.education">
            <t-option label="本科" value="本科" />
            <t-option label="硕士研究生" value="硕士研究生"></t-option>
            <t-option label="硕士博士生" value="硕士博士生"></t-option>
            <t-option label="专科" value="专科"></t-option>
            <t-option label="高中" value="高中"></t-option>
            <t-option label="初中" value="初中"></t-option>
            <t-option label="小学" value="小学"></t-option>
            <t-option label="未接受教育" value="未接受教育"></t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="婚姻情况">
          <t-radio-group v-model="formData1.marriage">
            <t-radio value="保密">保密</t-radio>
            <t-radio value="已婚">已婚</t-radio>
            <t-radio value="未婚">未婚</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item> </t-form-item>
        <t-form-item stlye="width:800px">
          <t-space size="small">
            <t-button theme="primary" type="submit">保存</t-button>
            <t-button theme="default" variant="base" type="reset"
              >重置</t-button
            >
          </t-space>
        </t-form-item>
      </t-form>
    </t-dialog>
    <!-- 删除弹出框 -->
    <t-dialog
      v-model:visible="visible1"
      theme="info"
      header="确认删除"
      body="确认删除吗？"
      attach="body"
      :confirm-on-enter="false"
      :on-cancel="onCancel"
      :on-confirm="onConfirmAnother"
    />
  </div>
</template>
<script setup lang="jsx">
import { ref, reactive, onMounted ,onActivated, onDeactivated } from "vue";
import { Icon } from "tdesign-icons-vue-next";
import { getUserList, addUser, editUser, deleteUser } from "../../api/staff.js";
import {
  unitOgrListTree,
  addUnitOrg,
  updateUnitOrg,
  deleteUnitOrg,
} from "../../api/basic.js";
import {
  ErrorCircleFilledIcon,
  CheckCircleFilledIcon,
  CloseCircleFilledIcon,
} from "tdesign-icons-vue-next";
let visible = ref(false)
let visible1=ref(false)
 let breakoff = ref(false);
let formData1 = reactive({
  birthday: "",
  department: "",
  email: "",
  gender: "",
  status: "Y",
  password: "",
  mobile: "",
  name: "",
  regTime: "",
  userName: "",
  memberno: "",
  prop1:"",
  prop2:"",
  prop3:"",
  education: "",
  marriage: "保密",
});
let form = ref(null);
const rules = {
  name: [{ required: true, message: "请填写名称" }],
  mobile: [{ required: true, message: "请填写手机号" }],
  role: [{ required: true, message: "请填写角色" }],
  department: [{ required: true, message: "请选择组织架构" }],
  email: [{ required: true, message: "请填写邮箱" }],
};
const statusNameListMap = {
  Y: { label: "账号可用", theme: "success" },
  N: { label: "账号异常", theme: "warning" },
  '':{label: "账号异常", theme: "warning"}
};
const data = ref([]);
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref("medium");
const showHeader = ref(true);
const options = [
  { label: "已激活", value: "Y" },
  { label: "未激活", value: "N" },
];
const pagination = reactive({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 1,
});
const columns = ref([
  { colKey: "name", title: "姓名", width: "100", align: "center" },

  {
    colKey: "status",
    title: "账号状态",
    width: "100",
    align: "center",
    cell: (h, { row }) => {
      return (
        <t-tag
          shape="round"
          theme={statusNameListMap[row.status].theme}
          variant="light-outline"
        >
          {statusNameListMap[row.status].label}
        </t-tag>
      );
    },
  },
  { colKey: "department", title: "所属部门", align: "center" },
  // { colKey: "role", title: "角色", ellipsis: true, align: "center" },
  { colKey: "id", title: "编号", width: "100", align: "center" },
  { colKey: "unit_ID", title: "员工工号", align: "center" },
  { colKey: "email", title: "账号", align: "center" },
  { colKey: "password", title: "密码", align: "center" },
  // { colKey: "phone_number", title: "手机号码", align: "center" },
  { colKey: "regTime", title: "建档时间", align: "center" },
  // { colKey: "createTime", title: "操作" },
  {
    colKey: "operation",
    title: "操作",
    width: 150,
    align: "center",
  },
]);
const cas = reactive({
  name: "",
  pageNo: 1,
  pageSiz: 10,
  status: "",
  unitid: "",
});
const bzbl = ref(true);
//添加按钮
const adduser = () => {
  bzbl.value = true;
  form.value.reset();
  visible.value = true;
};
//确认按钮
const onSubmit = async ({ validateResult }) => {
  if(validateResult===true ){
  if (bzbl.value) {
    //添加
    const now = new Date();
    const year = now.getFullYear().toString().padStart(4, "0");
    const month = (now.getMonth() + 1).toString().padStart(2, "0");
    const day = now.getDate().toString().padStart(2, "0");
    const hour = now.getHours().toString().padStart(2, "0");
    const minute = now.getMinutes().toString().padStart(2, "0");
    const second = now.getSeconds().toString().padStart(2, "0");
    formData1.regTime =year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
    formData1.id = ''
  formData1.unit_ID = ''
    const res = await addUser(formData1);
     api()
  } else {
    //编辑
    const res1 = await editUser(formData1);
    api()
    console.log(res1);
  }
  visible.value = false;
  }
};
//编辑
const rehandleClickOp = (row) => {
  bzbl.value = false;
  console.log(row);
  form.value.reset();
  formData1.birthday = row.birthday;
  formData1.department = row.department;
  formData1.email = row.email;
  formData1.gender = row.gender;
  formData1.status = row.status;
  formData1.password = row.password;
  formData1.mobile = row.mobile;
  formData1.name = row.name;
  formData1.regTime = row.regTime;
  formData1.userName = row.userName;
  formData1.memberno = row.memberno;
  formData1.education = row.education;
  formData1.marriage = row.marriage;
  formData1.prop1=row.prop1
  formData1.prop2=row.prop2
  formData1.prop3=row.prop3
  formData1.id = row.id;
  formData1.unit_ID = row.unit_ID;
  visible.value = true;
};
const idI=ref('')
//删除
const rehandleClickdl = (row) => {
   idI.value=row.id
   visible1.value=true
};
//删除确认
const onConfirmAnother=async (context)=>{
  const res=await deleteUser({id: idI.value})
 visible1.value = false;
  api()
}
//重置按钮
const onReset = () => {};
const zjlist = ref([]);
const api = async () => {
  const res = await unitOgrListTree();
  let arr = [];
  res.data.forEach((item) => {
    arr.push({
      label: item.orgName,
      value: item.orgName,
      orgName: item.orgName,
      id: item.id,
      parentId: item.parentId,
      parentOrgName: item.parentOrgName,
      unitId: item.unitId,
      orgCreateTime: item.orgCreateTime,
      children: (() => {
        if (item.childrenOrg === undefined) return [];
        let arr2 = [];
        item.childrenOrg.forEach((ite) => {
          arr2.push({
            label: ite.orgName,
            value: ite.orgName,
            orgName: ite.orgName,
            id: ite.id,
            parentId: ite.parentId,
            parentOrgName: ite.parentOrgName,
            unitId: ite.unitId,
            orgCreateTime: ite.orgCreateTime,
            children: (() => {
              if (ite.childrenOrg === undefined) return [];
              let arr3 = [];
              ite.childrenOrg.forEach((it) => {
                arr3.push({
                  label: it.orgName,
                  value: it.orgName,
                  orgName: it.orgName,
                  id: it.id,
                  parentId: it.parentId,
                  parentOrgName: it.parentOrgName,
                  unitId: it.unitId,
                  orgCreateTime: it.orgCreateTime,
                  children: (() => {
                    if (it.childrenOrg === undefined) return [];
                    let arr4 = [];
                    it.childrenOrg.forEach((i) => {
                      arr4.push({
                        label: i.orgName,
                        value: i.orgName,
                        orgName: i.orgName,
                        id: i.id,
                        parentId: i.parentId,
                        parentOrgName: i.parentOrgName,
                        unitId: i.unitId,
                        orgCreateTime: i.orgCreateTime,
                        children: (() => {
                          if (i.childrenOrg === undefined) return [];
                          let arr5 = [];
                          i.childrenOrg.forEach((ie) => {
                            arr4.push({
                              label: ie.orgName,
                              value: ie.orgName,
                              orgName: ie.orgName,
                              id: ie.id,
                              parentId: ie.parentId,
                              parentOrgName: ie.parentOrgName,
                              unitId: ie.unitId,
                              orgCreateTime: ie.orgCreateTime,
                            });
                          });
                        })(),
                      });
                    });
                  })(),
                });
              });
              return arr3;
            })(),
          });
        });
        return arr2;
      })(),
    });
  });
  zjlist.value = arr;
  const res1 = await getUserList(cas);
  data.value = res1.data.list;
  pagination.total = res1.data.totalCount;
};
const pagechange = async (e) => {
  cas.pageNo = e.current;
  cas.pageSiz = e.pageSize;
  pagination.defaultCurrent = e.current;
  pagination.defaultPageSize = e.pageSize;
  const res1 = await getUserList(cas);
  data.value = res1.data.list;
  pagination.total = res1.data.totalCount;
};
const handleRowClick = (e) => {};

onMounted(() => {
  api();
  breakoff.value =true
});
onActivated(() => {
      //缓存页面再启动函数
      if (breakoff.value !== true) {
         api();
      }
    });
</script>
<style lang="scss" scoped>
.box {
  width: calc(100% - 30px);
  padding-left: 40px;
  .top_box {
    width: 100%;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    .t-form__item {
      display: inline-block;
    }
    .t-form__controls-content {
      width: 200px;
    }
    .btn {
      margin-left: 20px;
    }
    .tdesign-demo-dropdown {
      &__text {
        display: inline-flex;
        align-items: center;
        .t-icon {
          margin-left: 8px;
        }
      }
    }
    .t-icon {
      position: relative;
      left: -20px;
    }
  }
  .tab_box {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    // margin-left: 15px;
    border-radius: 15px;
    background-color: #fff;
    overflow: hidden;
    overflow-y: scroll;
    height: calc(100vh - 283px);
    .btn {
      margin-left: 15px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-right: 15px;
      font-size: 16px;
      text-align: right;
    }
    .t-link {
      margin-right: 15px;
      color: rgb(59, 182, 254);
    }
  }
  .t-dialog .t-input {
    width: 200px !important;
  }
}
</style>
